<template>
  <div class="userLoginView">
    <h2>用户登录</h2>
    <a-form 
    style="max-width: 480px; margin: 0 auto;"
    label-align="left" 
    auto-label-width 
    :model="form"  
    @submit="handleSubmit">

    <a-form-item 
       field="userAccount" 
       tooltip="请输入账号" 
       label="账号"
    >
      <a-input
        v-model="form.userAccount"
        placeholder="请输入你的账号"
      />
    </a-form-item>

    <a-form-item 
       field="userPassword" 
       label="密码"
    >
      <a-input-password v-model="form.userPassword"  placeholder="请输入你的密码" />
    </a-form-item>
    
    <a-form-item>
      <a-button html-type="submit" type="primary" style="width: 120px; margin-left: 120px;">登录</a-button>
    </a-form-item>
  </a-form>
 
  </div>
</template>

<style scoped>
.userLoginView{
  text-align:center;
  
}
</style>

<script setup lang="ts">
import { UserControllerService, UserLoginRequest } from '../../../generated';
import { reactive } from 'vue';
import message from '@arco-design/web-vue/es/message';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router=useRouter();
const store=useStore();

const form = reactive({
    userAccount: "",
    userPassword: "",
} as UserLoginRequest);

    const handleSubmit = async () => {
      const res=await UserControllerService.userLoginUsingPost(form);
      if(res.code === 0){
        alert("登陆成功");
        //登录成功，跳转到主页
        await store.dispatch("user/getLoginUser");
        router.push({
          path: "/",
          replace: true,
        });
      }
      else{
        message.error("登陆失败，"+res.message);
      }
    };
</script>
